<html>
    <head>
        <title>列表的排序过渡</title>
    </head>
    <body>
        <script>
            // 二、列表的排序过渡
                                /*
                                    <transition-group>组件还有一个特殊之处。
                                    不仅可以有 "进入" 和 "离开" 动画，还可以改变定位。
                                    要使用这个新功能只需要了解新增的 v-move class,它会在元素的改变定位的过程中应用。 
                                    像之前的类名一样，可以通过 name 标签属性来自定义前缀，也可以通过 move-class 标签属性手动设置。

                                    v-move 对于设施过渡的奇幻时机和多度曲线非常有用，你会看到如下的例子：

                                        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"><-/script>
                                        <div id="flip-list-demo">
                                            <transistion-group name="flip-list" tag="ul">
                                                <li v-for="item in items" v-bind:key="item">
                                                    {{ item}}
                                                </li>
                                            </transistion-group>
                                        </div>
                                */

                                        new Vue({
                                            el:'#flip-list-demo',
                                            data:{
                                                items:[1,2,3,4,5,6,7,8,9]
                                            },
                                            methods:{
                                                shuffle:function(){
                                                    this.items=_.shuffle(this.items)
                                                }
                                            }
                                        })
                                /*
                                    .flip-lsit-move{
                                        transition: transform 1s;
                                    }
                                */



                                /*
                                    这个看起来很神奇，内部的实现，Vue使用了一个叫"Flip"的"简单动画队列"，使用 transforms 将元素从之前的位置平滑过渡到新的位置。

                                    我们将之前实现的例子和这个技术结合，使我们列表的一切变动都会有动画过渡：

                                        lodash 库是用来生成随机数的，我们用它来打乱列表的顺序。

                                        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"><-/script>
                                        <div id="list-complete-demo" class="demo">
                                            <button v-on:click="shuffle">Shuffle</button>
                                            <button v-on:click="add">Add</button>
                                            <button v-on:click="remove">Remove</button>
                                            <transition-group name="list-complete" tag="p">
                                                <span 
                                                    v-for="item in items"
                                                    v-bind:key="item"
                                                    classs="list-complete-item"
                                                >
                                                    {{ item }}
                                                </span>
                                            </transition-group>
                                        </div>
                                */
                                        new Vue({
                                            el:'#list-complete-demo',
                                            data:{
                                                items:[1,2,3,4,5,6,7,8,9],
                                                nextNum:10
                                            },
                                            methods:{
                                                randomIndex:function(){
                                                    return Math.floor(Math.random()*this.itemsl.length)
                                                },
                                                add:function(){
                                                    this.items.splice(this.randomIndex(),0,this.nextNum++)
                                                },
                                                remove:function(){
                                                    this.items.splice(this.randomIndex(),1)
                                                },
                                                shuffle:function(){
                                                    this.items =_.shuffle(this.items)
                                                }
                                            }
                                        })
                                /*
                                    .list-complete-item {
                                        transition: all 1s;
                                        display: inline-block;
                                        margin-right: 10px;
                                    }
                                    .list-complete-enter, .list-complete-leave-to{
                                        opacity: 0;
                                        transform: translateY(30px);
                                    }
                                    .list-complete-leave-active {
                                        position: absolute;
                                    }
                                */

                             /*
                                Flip 动画不仅可以实现单列过渡，多维网格也"同样可以过渡"
                             */
        </script>
    </body>
</html>